<template>
  <el-header class="app-header">
    <div class="header-content">
      <!-- 左侧区域：菜单控制 & 面包屑导航 -->
      <div class="header-left">
        <!-- 侧边栏折叠控制按钮 -->
        <el-button 
          class="collapse-btn" 
          :class="{ 'is-collapsed': isCollapse }"
          @click="toggleSidebar"
        >
          <el-icon :size="20">
            <component :is="collapseIcon" />
          </el-icon>
        </el-button>

        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" class="breadcrumb-nav">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <template v-for="menu in parentMenus" :key="menu.path">
            <el-breadcrumb-item :to="menu.path">
              {{ menu.label }}
            </el-breadcrumb-item>
          </template>
          <el-breadcrumb-item v-if="currentMenu" :to="currentMenu.path">
            {{ currentMenu.label }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 标签页 -->
      <CommonTabs 
        :tabs="tabsList" 
        :active-tab="currentTab"
        @command="handleTabCommand"
        ref="tabs"
      />

      <!-- 右侧区域：用户操作 -->
      <div class="header-right">
        <el-dropdown trigger="click">
          <span class="user-avatar">
            <img :src="avatarImg" alt="用户头像" class="avatar-image" />
          </span>
          
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="navigateToProfile">个人中心</el-dropdown-item>
              <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-header>
</template>

<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import avatar from '@/assets/img/vue.svg'
export default {
  setup() {
    const store = useStore()
    const router = useRouter()

    // 计算属性
    const isCollapse = computed(() => store.state.isCollapse)
    const currentMenu = computed(() => store.state.currentMenu)
    const parentMenus = computed(() => store.state.activeParentMenus)
    
    // 折叠图标动态计算
    const collapseIcon = computed(() => 
      isCollapse.value ? 'Expand' : 'Fold'      
    )

    /**
     * 切换侧边栏折叠状态
     */
    const toggleSidebar = () => {
      store.commit('toggleSidebar')
    }

    /**
     * 处理用户注销
     */
    const handleLogout = async () => {
      try {
        await store.dispatch('logout')
        router.push('/login')
      } catch (error) {
        console.error('注销失败:', error)
      }
    }

    return {
      avatarImg: avatar,
      isCollapse,
      currentMenu,
      parentMenus,
      collapseIcon,
      toggleSidebar,
      navigateToProfile: () => router.push('/profile'),
      handleLogout
    }
  }
}
</script>

<style scoped lang="less">
.app-header {
  border-bottom: 1px solid var(--header-border-color);
  background: var(--header-bg-color);

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;

    .header-left {
      display: flex;
      align-items: center;
      gap: 15px;

      .collapse-btn {
        background: var(--collapse-btn-bg);
        box-shadow: var(--collapse-btn-shadow);
        transition: all 0.3s ease;

        &.is-collapsed {
          transform: rotate(180deg);
        }
      }

      .breadcrumb-nav {
        :deep(.el-breadcrumb__item) {
          .el-breadcrumb__inner {
            color: var(--breadcrumb-color);
            
            &.is-link {
              color: var(--breadcrumb-link-color);
              &:hover {
                color: var(--breadcrumb-hover-color);
              }
            }
          }
        }
      }
    }

    .header-right {
      .user-avatar {
        display: block;
        cursor: pointer;
        
        .avatar-image {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          transition: transform 0.3s ease;
          
          &:hover {
            transform: scale(1.1);
          }
        }
      }
    }
  }
}
</style>